<template>
    <div class="admin-container">
        <!-- <div class="main">
            <div class="main-menu">
                left
            </div>
            <div class="main-body">
                right
            </div>
        </div> -->

        <div class="head">

            <myhead></myhead>
        </div>
        <div class="main">
            <div class="mian-menu">
                <mymenu></mymenu>
            </div>
            <div class="main-body">
                <div>
                    <navbar></navbar>
                </div>
                <div>
                    page
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { close_loading } from '@/utils/loading';
import { onMounted } from 'vue';

import myhead from '@/components/layout/head.vue'
import mymenu from '@/components/layout/menu.vue'
import navbar from '@/components/layout/navbar.vue'



onMounted(() => {
    close_loading();
})

</script>

<style scoped>
.admin-container {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
}

/* 
.main {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: pink;
}

.main-menu {
    width: 200px;
    height: 100%;
    background-color: yellowgreen;

}

.main-body {
    flex: 1;
    background-color: aqua;
} */



.head {
    height: 60px;
    border-bottom: 1px solid #eee;
    /* background-color: #000; */
}

.main {
    width: 100%;
    height: calc(100vh - 61px);
    /* background: pink; */
    display: flex;
}

.mian-menu {
    height: 100%;
    border-right:1px solid #eee;
   
    /* background: yellowgreen; */
}

.main-body {
    flex: 1;
    /* background-color: blueviolet; */
}
</style>